<template>
	<view class="pageBg">
		<view class="address_box" v-if="List.length > 0">
			<view class="item" v-for="(item, index) in List" :key="item.id" @click="chooseAddress(item)">
				<view class="line flex">
					<view class="label">
						{{ item.contact }}
					</view>
					<view class="val">
						{{ item.telephone }}
					</view>
				</view>
				<view class="line flex">
					<view class="label">
						{{ item.province + '省' + item.city + item.district + item.address }}
					</view>
					<view class="val"></view>
				</view>
				<view class="line spaceBetween">
					<view class="label flex">
						<!-- <text class="icon cuIcon-round" v-show="item.is_default !== 1"></text> -->
						<image class="icon cuIcon-round" src="/static/images/my/success.png" v-show="item.is_default === 1" mode=""></image>
						<text>默认地址</text>
					</view>
					<view class="val flex">
						<view class="opt flex" @click.stop="EditAddress(item)">
							<image src="/static/images/my/edit.png" class="edit btnicon verticalMiddle" mode="heightFix"></image>
							<view>编辑</view>
						</view>
						<view class="opt flex" @click.stop="DelAddress(item)">
							<image src="/static/images/my/del.png" class="del btnicon verticalMiddle" mode="heightFix"></image>
							<view>删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Noicon" v-else>
			<image src="/static/noList.png" mode="widthFix"></image>
		</view>
		<view class="btnview" @click="navAdd">+ 添加新地址</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [], //用户地址列表
			};
		},
		onLoad(options) {
			this.init();
			uni.$on('getAddress', () => {
				this.init();
			});
			if (options.type == 0) {
				uni.setNavigationBarTitle({
					title: '选择地址',
				});
			} else {
				uni.setNavigationBarTitle({
					title: '用户地址',
				});
			}
			this.type = options.type;
		},
		methods: {
			navAdd() {
				uni.navigateTo({
					url: '/pages/my/address/add/add?type=add',
				});
			},
			chooseAddress(item) {
				//选择地址
				if (this.type == 1) return;
				uni.$emit('chooseAddress', item);
				uni.navigateBack();
			},
			init() {
				//初始化数据
				this.$api.getUserAddress().then((res) => {
					console.log(res);
					if (res.code == 1) {
						this.List = res.data;
					}
				});
			},
			EditAddress(e) {
				//修改地址
				uni.navigateTo({
					url: '/pages/my/address/add/add?type=edit&item=' + JSON.stringify(e),
				});
			},
			DelAddress(e) {
				//删除地址
				uni.showModal({
					title: '温馨提示',
					content: '你确定删除此条地址吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api
								.DelAddress({
									id: e.id,
								})
								.then((res) => {
									if (res.code == 1) {
										this.init();
									}
								});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		padding-bottom: 160rpx;
		.address_box {
			overflow: hidden;
		}
		.item {
			overflow: hidden;
			font-size: $uni-font-size-14;
			color: #000000;
			width: $connet-width;
			margin: $margin-width auto;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 204rpx;
			background: $content-bg-colcor;
			border-radius: $border-radius;

			.line {
				font-size: $uni-font-size-14;
				white-space: nowrap;
				margin: 0 $margin-width;
				justify-content: space-between;
				width: 630rpx;
				.icon {
					display: inline-block;
					margin-right: 10rpx;
					color: $price-color;
					width: $uni-font-size-14;
					height: $uni-font-size-14;
					margin-right: 5rpx;
					border: 1rpx solid $price-color;
					border-radius: 50%;
				}

				.val {
					font-size: $uni-font-size-12;

					.opt {
						margin-left: $submargin-width;
						align-items: center;

						.btnicon {
							height: 23rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.Noicon {
			width: 400rpx;
			position: fixed;
			top: 40%;
			left: 0;
			right: 0;
			margin: auto;
			image {
				width: 100%;
				display: block;
			}
		}
		.btnview {
			position: fixed;
			width: $connet-width;
			bottom: 60rpx;
			left: 0;
			right: 0;
			margin: auto;
			line-height: 80rpx;
			border-radius: $btn-border-radius;
		}
	}
</style>
